import './styles.css'
import { Form, Input, Button, Card, Flex, message} from 'antd'
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons'
// import { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'

function Register() {

    // 表单 & 跳转
    const [form] = Form.useForm();
    const navigate = useNavigate();

    // 提交表单 onFinish方法
    const onFinish = async (values) => {
        console.log(values);
        const { userId, password } = values;

        try {
            const response = await axios.post('http://58.87.105.2:8080/register',{ userId, password });
            console.log(response.data);
            if (response.data.code === 0) {
                message.success('注册成功，请登录');
                navigate('/login');
            } else {
                message.error(response.data.message || '注册失败');
            }
        } catch (error) {
            message.error(error.response?.data?.message || '注册失败');
        }
    }

    return (
        <div className='register'>
            <Card className='register-container'>
                {/*<img className='register-logo' src={logo} alt='' style={{ display:'block', margin:'0 auto 20px'}}/>*/}
                {/* 注册表单 */}
                <Form form={form} onFinish={onFinish}>
                    <Form.Item
                        name="userId"
                        label="用户名"
                        rules={[
                            { required: true, message: '用户名不能为空'},
                            { min: 3, message: '用户名至少3个字符'}
                        ]}>
                        <Input size='large' placeholder='请输入用户名' />
                    </Form.Item>
                    <Form.Item
                        name="password"
                        label="密码"
                        rules={[
                            { required: true, message: '密码不能为空'},
                            { min: 3, message: '密码至少3位'},
                            { max: 16, message: '密码不得超过16位'},
                        ]}>
                        <Input.Password
                            size='large'
                            placeholder='请输入密码'
                            iconRender = { visible => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)} />
                    </Form.Item>
                    <Form.Item
                        name="passwordrepeat"
                        label="重复密码"
                        dependencies={["password"]}
                        rules={[
                            { required: true, message: '再次输入密码不能为空'},
                            ({getFieldValue}) => ({
                                validator(_,value) {
                                    if(!value || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject('两次输入的密码不一致');
                                }
                            })
                        ]}>
                        <Input.Password
                            size='large'
                            placeholder='请再次输入密码'
                            iconRender = { visible => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)} />
                    </Form.Item>
                    <Form.Item>
                        <Flex justify='space-between' align='center'>
                            <Button type='primary' htmlType='submit' size='large' block>
                                注册
                            </Button>
                        </Flex>
                    </Form.Item>
                </Form>
            </Card>
        </div>
    );
}

export default Register;
